/* 登录注册页面的样式 */
#bgimg {
    background-image: url("../../static/bg-pencil.png");
    background-attachment: fixed; /* 背景图固定 */
    background-repeat: no-repeat; /* 背景图不重复 */
    background-size: cover; /* 背景图覆盖整个容器 */
    -webkit-background-size: cover; /* 兼容旧版本浏览器 */
    /* 最小高度为视口高度, vh代表视窗高度（viewport height），而100vh则表示整个视窗的高度的100%，即无论用户设备的屏幕高度如何，100vh总是等于该屏幕的完整高度。 */
    /* 这意味着它至少会占据整个屏幕的高度，并且随着页面内容的增加可以扩展更大的高度。这种设置在创建需要全屏显示的设计时特别有用。 */
    min-height: 100vh; 
}


/* 内容垂直水平居中 */
.box-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 将元素移动到其自身宽度和高度的一半 */
}

/* 登录框样式 */
.box-login {
    width: 500px;
    height: 300px;
    background: #ECE5D7;
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    padding: 20px; /* 内边距 */
    display: flex;
    flex-direction: column; /* 让标题和内容上下排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
}
/* 登录框标题样式 */
.box-login-title{
    text-align: center;
    margin: 0, auto;
    font-size: 30px;
    font-weight: bold;
    color: #333; /* 深色文字 */
    width: 100%; /* 宽度占满 */
    /* 让标题独占一行 */
    display: block;
}

.box-login-title p {
    margin: 0 auto; /* 标题下方的间距 */
}

/* 登录框内容样式 */
.box-login-body{
    width: 400px;
    margin-top: 10px;
    display: flex;
    flex-direction:row; /* 水平排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
}

.box-login-body p {
    width: 60px;
    color:#333;
    font-size: 20px; /* 设置内容字体大小 */
}

.box-login-body input {
    flex: 1; /* 让输入框占据剩余空间 */
}

.box-login-reg {
    width: 400px;
    display: flex;
    justify-content: flex-end; /* 右对齐 */
    margin-top: 0px;
}

.box-login-reg p {
    cursor: pointer;
}